<!--
 * @Author: fisher
 * @Date: 2021-11-19 09:49:15
 * @LastEditTime: 2021-11-19 11:39:26
 * @LastEditors: fisher
 * @Description: 
 * @FilePath: \daidaidaidai\demo1.html
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      html,
      body,
      #mian {
        width: 100%;
        height: 100%;
        overflow: hidden;
        background: rgba(3, 6, 6, 0.7);
      }
    </style>
  </head>
  <body>
    <div id="mian"></div>
  </body>
  <script src="https://cdn.jsdelivr.net/npm/echarts@5.2.2/dist/echarts.min.js"></script>
  <script>
    console.log(echarts);
    var chartDom = document.getElementById("mian");
    var myChart = echarts.init(chartDom);
    var option;

    option = {
      tooltip: {
        trigger: "item",
      },
      graphic: [
        {
          type: "text",
          left: "center",
          top: "60%",
          style: {
            text: "项目数量",
            textAlign: "center",
            fill: "#B5B5B5",
            fontSize: 50,
          },
        },
        {
          type: "text",
          left: "center",
          top: "35%",
          style: {
            text: "280",
            textAlign: "center",
            fill: "#fff",
            fontSize: 200,
            fontWeight: 700,
          },
        },
        {
          type: "circle",
          left: "center",
          top: "23%",
          shape: {
            cx: 40,
            cy: 60,
            r: 280,
          },
          style: {
            fill: "transparent",
            stroke: "#fff",
            fontSize: 200,
            fontWeight: 700,
          },
        },
      ],
      series: [
        {
          name: "项目详情",
          type: "pie",
          radius: ["60%", "70%"],
          avoidLabelOverlap: false,
          itemStyle: {
            borderRadius: 50,
            borderColor: "rgba(55,55,55,0.8)",
            borderWidth: 5,
          },
          color: ["#367FDB", "#34D8BB", "#7CBD62", "#FFEA95", "#FE6F6F"],

          label: {
            //展示文本设置
            normal: {
              show: true, //展示

              position: "outside", // outside表示文本显示位置为外部
              formatter: "{name|{b}}\n{value|{c}} ",
              rich: {
                name: {
                  color: "#fff",
                  fontSize: "24px",
                  backgroundColor: "rgba(55,55,55,0.8)",
                  padding: 10,
                },
                value: {
                  color: "#fff",
                  fontSize: "24px",
                  align: "left",
                  padding: [10, 0, 0, 10],
                },
              },
            },
            emphasis: {
              //文本样式
              show: true, //展示
              textStyle: {
                //文本样式
                fontSize: "24",
                fontWeight: "600",
              },
            },
          },
          labelLine: {
            normal: {
              show: true, //引导线显示
              //引导线设置
              length: 50,
              length2: 100,
              maxSurfaceAngle: 20,
            },
          },
          data: [
            { value: 58, name: "新建项目" },
            { value: 118, name: "续建项目" },
            { value: 52, name: "前期项目" },
            { value: 16, name: "前期储备项目" },
            { value: 38, name: "已完工项目" },
          ],
          z: 99,
        },
        {
          type: "pie",
          radius: ["58%", "72%"],
          center: ["50%", "50%"],
          selectedMode: false,
          hoverAnimation: false,
          data: [{ value: 0, name: "" }],
          itemStyle: {
            color: "rgba(55,55,55,0.8)",
          },
          label: {
            show: false,
          },
          labelLine: {
            show: false,
          },
          tooltip: {
            show: false,
          },
          animation: false,
          cursor: "auto",
          emphasis: {
            itemStyle: {
              color: "rgba(55,55,55,0.8)",
            },
          },
        },
      ],
    };

    option && myChart.setOption(option);
  </script>
</html>
